<template>
  <div class="mcl-wrap wrapper" ref="wrapper2">
    <ul class="content">
      <li v-for="(v,i) of selector" :key="i" :class="v.maitKey | isChoosed(chooseId)" @click="doChoose(v)">
        <p>{{v.title}}</p>
      </li>
    </ul>
  </div>
</template>

<script>
import Bscroll from "better-scroll";
export default {
  watch:{
    chooseId(newId){
        this.$store.dispatch("loadClassifyRightTopData");
        this.$store.dispatch("loadClassifyRightDownData");
    }
  },
  computed: {
    selector() {
      return this.$store.getters.classifyLeftData;
    },
    chooseId() {
      return this.$store.getters.chooseId;
    }
  },
  filters: {
    isChoosed(id, chooseId) {
      return id == chooseId.maitKey ? "active" : "";
    }
  },
  mounted() {
    this.$store.dispatch("loadClassLeftData");
    this.$store.commit("setSort","pop");
    this.bscrollInit();
  },
  methods: {
    bscrollInit() {
      this.$nextTick(() => {
        if (!this.scroll) {
          this.scroll = new Bscroll(this.$refs.wrapper2, {
            click: true
          });
        } else {
          this.scroll.refresh();
        }
      });
    },
    doChoose(data){
      this.$store.commit("setChooseId",{maitKey:data.maitKey,miniWallkey:data.miniWallkey});
    }
  }
};
</script>

<style lang="less">
.mcl-wrap {
  width: 100%;
  height: 100%;
  > .content {
    background-color: #f6f6f6;
    > li {
      height: 0.8rem;
      text-align: center;
      font-size: 0.25rem;
      color:#888;
    }
    > .active {
      background-color: #ffffff;
      >p{
        border-left:0.05rem solid #FC5779;
        color:#FC5779;
      }
    }
  }
}
</style>
